import React from 'react';
import {Layout, DatePicker, Input, Button, Table, Menu, Dropdown} from 'antd'
import {CopyOutlined, FileExcelOutlined, SearchOutlined} from '@ant-design/icons';
import '../MoneyManagement/Voucher.css'
// const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;
// let selectValue = '';
const columns = [
    {
        title: '支付流水号',
        dataIndex: 'name',
        align:'center',
    },
    {
        title: '单号',
        dataIndex: 'name',
        align:'center',
    },
    {
        title: '支付时间',
        dataIndex: 'chinese',
        align:'center',
    },
    {
        title: '经销商名称',
        dataIndex: 'math',
        align:'center',
    },
    {
        title: '支付方式',
        dataIndex: 'english',
        align:'center',
    },
    {
        title: '金额',
        dataIndex: 'english',
        align:'center',
    },
    {
        title: '收款账户',
        dataIndex: 'english',
        align:'center',
    },
    {
        title: '摘要',
        dataIndex: 'english',
        align:'center',
    },
    {
        title: '备注',
        dataIndex: 'english',
        align:'center',
    },
    {
        title: '状态',
        dataIndex: 'english',
        align:'center',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <span>
                {dropdownMenu(text, record)}
            </span>
        ),
    },
];
function PDetails(xx,yx,e) {
    e.preventDefault()
    console.log(123)
    console.log(yx)
    console.log(xx)
    console.log(e)
}
function dropdownMenu(text, record) {
    const menu = (
        <Menu>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" onClick={PDetails.bind(this,text,record)} href='#'>
                    <CopyOutlined style={{marginRight:'10px'}}/>详情
                </a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href='#'onClick={e => e.preventDefault()}>
                    <FileExcelOutlined style={{marginRight:'10px'}}/>作废
                </a>
            </Menu.Item>
        </Menu>
    );
    return(
        <Dropdown overlay={menu}>
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                . . .
            </a>
        </Dropdown>
    )
}
const data = [
    {
        key: '1',
        name: 'John Brown',
        chinese: 98,
        math: 60,
        english: 70,
    },
    {
        key: '2',
        name: 'Jim Green',
        chinese: 98,
        math: 66,
        english: 89,
    },
    {
        key: '3',
        name: 'Joe Black',
        chinese: 98,
        math: 90,
        english: 70,
    },
    {
        key: '4',
        name: 'Jim Red',
        chinese: 88,
        math: 99,
        english: 89,
    },
];
// function handleChange(value) {
//     console.log(`selected ${value}`);
//     // selectValue =`selected ${value}`
// }
function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}


//收支明细
class PaymentDetails extends React.Component {
    render() {
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <RangePicker style={{width:500}}/>
                            <Search
                                placeholder="请输入支付流水号/单号/经销商名称"
                                onSearch={value => console.log(value)}
                                style={{width:500}}
                            />
                        </div>
                        <div className='topRight'>
                            <Button type="primary">导出</Button>
                        </div>

                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table columns={columns} dataSource={data} onChange={onChange} />
                </div>
            </div>
        );
    }
}

export default PaymentDetails;